<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es5</title>

    <style>

        div{

            margin-left: 0px;
            width: 100px;
            height: 100px;
            border: 1px sandybrown solid;
            border-radius: 50px;

        }

        #div1{

            background-color: red;
        }

        #div2{

            background-color: yellow;

        }

        #div3{

            background-color: green;
        }

    </style>




</head>




<body>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

<!--<script type="text/javascript" src="../lib/jquery-3.4.1.js"></script>-->

<script>


    function animate(ele,target,callback) {





        setTimeout(function () {

           var n = parseInt(ele.style.marginLeft) ;

            if (n === target){

                callback && callback()
            }else {

                if (n < target){

                    n ++;
                }else {

                    n--;
                }

                ele.style.marginLeft=n + "px";

                animate(ele,target,callback);

            }

        },10)

    }


    var div1 = document.getElementById("#div1");
    var div2 = document.getElementById("#div2");
    var div3 = document.getElementById("#div3");

    animate(div1,150,function () {

        animate(div2,200,function () {

            animate(div3,250,function () {



            })


        })


    })
    
    
    
</script>





</body>
</html>